<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>PDF</title>
    <style type="text/css">
        canvas {
            width: 100%;
            height: 100%;
            border: 1px solid black;
        }
    </style>
    <script src="pdf.js"></script>
    <script>
        var url = location.search.substring(1);
        var pdfDoc = null;

        function createPage() {
            var div = document.createElement("canvas");
            document.body.appendChild(div);
            return div;
        }

        function renderPage(num) {
            pdfDoc.getPage(num).then(function (page) {
                var viewport = page.getViewport(2.0);
                var canvas = createPage();
                var ctx = canvas.getContext('2d');

                canvas.height = viewport.height;
                canvas.width = viewport.width;

                page.render({
                    canvasContext: ctx,
                    viewport: viewport
                });
            });
        }

        PDFJS.getDocument(url).then(function (pdf) {
            pdfDoc = pdf;
            for (var i = 1; i <= pdfDoc.numPages; i++) {
                renderPage(i)
            }
        });

    </script>
</head>

<body>
</body>

</html>